<%--
  Created by IntelliJ IDEA.
  User: ykq
  Date: 2023/5/18
  Time: 9:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>预约挂号管理界面</title>
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <%--引入elementui css样式--%>
    <link rel="stylesheet" href="/css/index.css">
    <%--引入elementui js组件 js的引入必须放在vue引入的下方--%>
    <script type="text/javascript" src="/js/index.js"></script>
</head>
<body>
  <div id="app">
      <el-container>
          <el-header>
              <el-dropdown style="float:right;">
                  <span class="el-dropdown-link" >
                     <el-avatar style="margin-top: 10px" :src="userinfo.headImg"></el-avatar>
                  </span>
                  <el-dropdown-menu slot="dropdown" >
                      <el-dropdown-item>账号退出</el-dropdown-item>
                      <el-dropdown-item>修改密码</el-dropdown-item>
                  </el-dropdown-menu>
              </el-dropdown>
          </el-header>
          <el-container>
              <el-aside width="200px">
                  <!-- 侧边栏菜单 -->
                  <el-menu
                          background-color="#333744"
                          text-color="#fff"
                          active-text-color="#ffd04b">
                      <!-- 一级菜单 -->
                      <el-submenu :index="first.id" v-for="first in menus">
                          <!-- 一级菜单模板 -->
                          <template slot="title">
                              <!-- 图标 -->
                              <i :class="first.icon"></i>
                              <!-- 文本 -->
                              <span>{{first.name}}</span>
                          </template>
                          <!-- 二级子菜单 -->
                          <el-menu-item :index="child.id" v-for="child in first.children">
                              <!-- 二级菜单模板 -->
                              <template slot="title">
                                  <!-- 文本 -->
                                  <span>{{child.name}}</span>
                              </template>
                          </el-menu-item>
                      </el-submenu>
                  </el-menu>
              </el-aside>
              <el-main>Main</el-main>
          </el-container>
      </el-container>
  </div>
</body>
<script>
     let app=new Vue({
          el:"#app",
          data:{
             //当前用户对象
             userinfo:{},
             //当前用户具有的菜单
             menus:[]
          },
          created(){
              //加载用户信息
              this.getUserInfo();
              //加载左侧菜单
              this.getLeftMenu();
          },
          methods:{
              //加载用户信息
              getUserInfo(){
                   var that=this;
                   axios.get("/user/getUserInfo").then(function(result){
                         if(result.data.code==200){
                             that.userinfo=result.data.data;
                         }else{
                             location.href="/login.jsp"
                         }
                   })
              },
              //加载左侧菜单
              getLeftMenu(){
                  var that=this;
                  axios.get("/menu/getLeftMenu").then(function(result){
                       that.menus=result.data.data;
                  })
              }
          }
     })
</script>
<style>
    *{
        padding: 0px;
        margin: 0px;
    }
    .el-header, .el-footer {
        background-color:#1C6D9D;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
    }

    body > .el-container {
        margin-bottom: 40px;
    }


</style>
</html>
